<!--
 @ File: d:\工作\上海项目\上海1\中欧\code\src\views\Login.vue
 @ Project: d:\工作\上海项目\上海1\中欧\code
 @ Created Date: 2020-10-09 09:56:21
 @ Author: Wang
 @ -----
 @ Last Modified:  2020-10-09 16:26:21
 @ Modified By: Wang
 @ -----
 @ Copyright (c) 2020 Hisw
 @ ------------------------------------
 @ vue will save your soul!
 -->

<template>
  <div class="login">
    vue中css的动画
    <transition
      name="fade"
      appear
      enter-active-class="animate__animated animate__fadeInUp"
      leave-active-class="animate__animated animate__fadeOutDown"
    >
      <div
        class="test"
        v-if="show"
      >test测试less语法test测试less语法test测试less语法test测试less语法test测试less语法test测试less语法test测试less语法test测试less语法test测试less语法test测试less语法test测试less语法</div>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
import * as API from '@/api/login';
export default {
  name: 'Login',
  data () {
    return {
      infoSource: null,
      show: true
    }
  },
  created () {
    console.log(this);
    // this.getInfo()
    // setTimeout(() => {
    //   this.getInfo()
    // }, 10);
  },
  methods: {
    handleClick: function () {
      this.show = !this.show;
    },
    cancelQuest (type) {
      console.log(this[type]);
      if (typeof this[type] === 'function') {
        this[type]('终止请求'); //取消请求
      }
    },
    getInfo () {
      this.cancelQuest('infoSource') // 请求发送前调用
      API.getInfo({ id: 1 }, this, 'infoSource').then(res => {
        console.log(res);
      })
    }
  },
}
</script>
<style scoped lang="less">
.test {
  width: 200px;
  height: @height;
  .font-12;
  .ellipsis();
}
</style>
